import { cn } from "@/lib/utils";

interface BentoCardProps {
  header: string;
  description: string;
  className?: string;
  children?: React.ReactNode;
}

export function BentoCard({ header, description, className, children }: BentoCardProps) {
  return (
    <div className={cn(
      'flex flex-col justify-between overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-4 transition-all',
      'select-text pointer-events-auto',
      className
    )}>
      <div className="relative z-10 space-y-4">
        <h3 className="text-xl font-semibold text-white group-hover:text-emerald-300/90 transition-colors duration-300">{header}</h3>
        <p className="text-white/60 whitespace-pre-line leading-relaxed">{description}</p>
        {children}
      </div>
      <div className="absolute inset-0 bg-gradient-to-r from-emerald-300/0 to-sky-400/0 group-hover:from-emerald-300/5 group-hover:to-sky-400/5 transition-all duration-500"></div>
    </div>
  );
}